<template>
    <div class="app-container">
        <iframe  ref="iframe" :src="'/jianshu/p/'+ $route.meta.id" @load="iframeLoad($event)"  frameborder="0" class="iframe-wapper"></iframe>
    </div>
</template>

<script>
export default {
  methods: {
    // hideEle(classNames){
    //     let idoc = this.$refs.iframe.contentWindow.document
    //     classNames.forEach(className=>{
    //         let eles = idoc.getElementsByClassName(className)
    //         if(eles.length>0){
    //             for (let i = 0; i < eles.length; i++) {
    //                 eles[i].style.display='none'
    //             }
    //         }
    //     })
    // },
    loadStyle () {
      let idoc = this.$refs.iframe.contentWindow.document
      let style = document.createElement('style')
      style.type = 'text/css'
      style.innerHTML = `
                    body {
                        padding-top:0px !important;
                    }
                    body > *:not(.note),.note >*:not(.post),.post >*:not(.article),.article >*:not(.show-content){
                        display: none !important;
                    }
                    ::-webkit-scrollbar {
                        width: 12px;
                        height: 12px;
                        background-color: #F5F5F5;
                    }

                    ::-webkit-scrollbar-thumb {
                        background-color: #c8cfd7;
                    }

                    ::-webkit-scrollbar-track {
                        background-color: #F5F5F5;
                    }
                `
      var head = idoc.getElementsByTagName('head')[0]
      head.appendChild(style)
    },
    iframeLoad (e) {
      let ifm = this.$refs.iframe
      let idoc = ifm.contentWindow.document
      this.loadStyle()
      ifm.height = idoc.body.scrollHeight
      ifm.style.opacity = 1
      // this.hideEle(['navbar','author','support-author','show-foot','follow-detail','meta-bottom','note-bottom','vue-side-tool'])
    }
  }
}
</script>

<style scoped>
.iframe-wapper{
    width: 100%;
    opacity: 0;
}
</style>
